<template>
  <div class="wft-edit-handler-dialog">
    <el-dialog width="45%" :visible.sync="visible" :title="dialogTitle" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="dialog-content">
        <div class="pad-lt-40">
          <span class="func-name">({{ params }}) => </span>
          <span class="func-name">{</span>
        </div>
        <div class="func-body">
          <MonacoEditor
            :value="funcBody"
            :height="450"
            :options="{ lineNumbers: 'on', language, theme: 'vs' }"
            @change="editorChange"
          />
        </div>
        <div class="func-name pad-lt-40">}</div>
      </div>
      <template #footer>
        <div class="wft-edit-handler-footer">
          <div>
            <el-alert type="success" :closable="false">
              <template #title>
                <slot name="tips">
                  <p><b>1. </b>如果您在配置响应拦截器返回了「response」那么上面「res.data」为服务器响应数据</p>
                  <p><b>2. </b>如果您在配置响应拦截器返回了「response.data」那么上面「res」为服务器响应数据</p>
                </slot>
              </template>
            </el-alert>
          </div>
          <div>
            <el-button size="mini" @click="visible = false">取消</el-button>
            <el-button size="mini" type="primary" @click="saveHandle">保存</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import MonacoEditor from '../../MonacoEditor/index.vue'
export default {
  data() {
    return {
      visible: false,
      funcBody: '',
      updateBody: ''
    }
  },
  props: {
    language: {
      type: String,
      default: 'javascript'
    },
    dialogTitle: {
      type: String,
      default: '函数编辑器'
    },
    params: {
      type: String,
      default: 'res'
    }
  },
  components: { MonacoEditor },
  methods: {
    init(handle) {
      this.visible = true
      this.funcBody = handle
    },
    // 编辑器内容变化
    editorChange(val) {
      this.updateBody = val || ''
    },
    // 保存
    saveHandle() {
      this.$message.success('保存成功!')
      this.visible = false
      this.$emit('saveHandle', this.updateBody)
    }
  }
}
</script>
<style scoped>
.dialog-content {
  padding-left: 15px;
  box-sizing: border-box;
}

.func-body {
  width: 100%;
  height: 500px;
  padding: 6px 0;
  box-sizing: border-box;
}

.func-title,
.func-name {
  font-size: 18px;
}

.func-title {
  color: #9867ae;
}

.func-name {
  color: #9867ae;
}

.wft-edit-handler-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  transform: translateY(5px);
}

.wft-edit-handler-footer > div:nth-of-type(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  flex: 1;
}

.ysbth {
  font-family: 'ysbth';
}

.pad-lt-40 {
  padding-left: 40px;
}
</style>